#{extends 'include.html' /} 
#{set title:'Buscar Usuario' /}

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
	function voltar(){
		window.open("@{Application.main}","_top");
	}

	function cadastrar() {
		window.open("@{Usuarios.cadastroUsuario}", "_top");
	}
</script>

#{cabecalho/}

<body>
	<br/>
	<div align="center">
		<input type="image" src="@{'/public/images/ADD-ICON.png'}" width="15px" height="15	px" style="margin-left:10px;" onclick="cadastrar()">
			Cadastrar Novo Usuario
	</div>
		
	#{if usuarios.empty}
		<div align="center">
			<p style="color: red;"> Nenhum Usuario Cadastrado no sistema. </p>
		</div>
	#{/if}
	<div class="infoAltRem">
		<img alt="Alterar Usuario"  src="/public/images/utilCRUD/alterar.png" width="25px" height="25px"> : Alterar Usuario &nbsp;
		<img alt="Remover Usuario" src="/public/images/utilCRUD/remover.JPG"  width="25px" height="25px"> : Remover Usuario	
	</div>

	#{if !usuarios.empty}
	<table width="100%" align="center">
		<caption class="legend1">
			Listagem de Usuarios
		</caption>
		<thead>
			<tr style="background-color: #336; color: #FFF; font-weight: bold; font-size: 0.8em;">
				<th width="1%" align="center"> 
					Id
				</th>
				<th width="10%" align="center"> 
					email
				</th>
				<th width="10%" align="center"> 
					login
				</th>
				<th width="10%" align="center"> 
					Senha
				</th>
				<th width="1%">
				</th>
				<th width="1%">
				</th>
			</tr>
			
			#{list items: usuarios, as:'usuario'}
				<tr>
					<td align="center">
						${usuario.id}
					</td>
					<td align="center">
						${usuario.email}
					</td>
					<td align="center">
						${usuario.login}
					</td>
					<td align="center">
						${usuario.senha}
					</td>
					<td align="center">
						<a href="@{Usuarios.editarUsuario(usuario.id)}">
							<img alt="Alterar Usuario"  src="/public/images/utilCRUD/alterar.png" width="25px" height="25px" >	
						</a>
					</td>
					<td align="center">
						<a href="@{Usuarios.excluirUsuario(usuario.id)}">
							<img alt="Remover Usuario" src="/public/images/utilCRUD/remover.jpg"  width="25px" height="25px" onclick="return confirm('Confirma?')">
						</a>
					</td>
				</tr>
			#{/list}
		</thead>
	</table>
	#{/if}
	
	</br>
	
	<div style="width: 100%" align="center" >
		<input type="button" value="Voltar" onclick="voltar()"/>
	</div>
	
#{rodape/}